<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>西瓜用户首页</title>
<link type="text/css" href="css/user_home_info.css" rel="stylesheet" />
<link type="text/css" href="css/common.css" rel="stylesheet" />
<link type="text/css" href="css/reset.css" rel="stylesheet" />
    <link type="text/css" href="css/esc.css" rel="stylesheet" />
    <link type="text/css" href="theme-chalk/index.css" rel="stylesheet" />
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script><!--必须得放在第一的位置-->
    <script type="text/javascript" src="js/user_home_info.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/esc.js"></script>
    <script src="js/element-ui-index.js"></script>
</head>

<body>
<div id="app">
<div class="index">
  <myframe>
  <div class="user_content f_f width_1200_center">
    <div class="content_position">您当前的位置：<a href="javascript:">首页</a><span>&gt;</span><a href="javascript:">用户主页</a></div>
   <!-- <div class="user_content_top f_z15"><a href="#">注册会员</a><span>Register</span></div>-->
    <div class="hr_10"></div>
    <div class="user_content_con over_hidden width_1200_center"><!--over_hidden也是清除浮动的一种-->
      <div class="user_content_con_nav fl">
          <div class="nav_info">
              <h1>个人信息</h1>
              <ul>
                  <li><div class=""><a :href="'user_home.html?uid='+user.uid">个人资料</a></div></li>
                  <li><div class="djbs"> <a :href="'user_home_info.html?uid='+user.uid">修改个人资料</a></div></li>
                  <li><a href="user_home_address.html">收货地址</a></li>
              </ul>
          </div>
          <div class="nav_goods">
              <h1>商品管理</h1>
              <ul>
                  <li><a href="user_home_order.html">我的订单</a></li>
                  <li><a href="user_home_favorite.html">我的收藏</a></li>
                  <li><a href="user_home_cart.html">我的购物车</a></li>
                  <li><a href="#">卖车中心</a></li>
              </ul>
          </div>
          <div class="nav_comments_opinion">
              <h1>评论意见</h1>
              <ul>
                  <li><a href="user_home_comment.html">我的评论</a></li>
                  <li><a href="user_home_idea.html">我的意见</a></li>
                  <li><a href="user_home_message.html">西瓜消息</a></li>
              </ul>
          </div>
      </div>
      <!--右侧信息开始-->
      <div class="user_content_con_c fr">
        <div class="user_home_info f_f width_1000_center">
          <div class="info_top width_1000_center clearfix">
            <div class="top_personal fl"><h1>个人资料</h1></div>
          </div>
          <div class="hr_10"></div>
          <div class="info_content over_hidden width_1000_center">
            <div class="content_con">
              <div class="con_name fl">用户名：</div>
              <div class="con_con fl"><h1>{{user.username}}</h1></div>
            </div>
            <div class="content_con">
              <div class="con_name fl"><span class="sign">*</span>昵称：</div>
              <div class="con_con con_txt fl"><input  class="nick_name_" type="text"  autocomplete="off" size="25" v-model="user.username"><span class="nick_name_ms text_te"></span></div>
            </div>

            <div class="content_con content_head over_hidden">
              <div class="con_name fl">当前头像：</div>
              <div class="con_con fl"><img :src="image" width="80" height="80" /></div>
                <input type="file" @change="sendImg" accept="image/*" id="file"
                       style="display: none">
              <div class="con_head fl" @click.prevent="changetx"><a>修改头像</a></div>
            </div>
            <div class="content_con">
              <div class="con_name fl"><span class="sign">*</span>性别：</div>
              <div class="con_con fl"><input type="radio" name="sex" id="m1" value="0" checked="checked" /><label for="m1">男</label><input type="radio" name="sex" id="m2" value="1"><label for="m2">女</label><input type="radio" name="sex" id="m3" value="2"><label for="m3">保密</label></div>
            </div>

            <div class="content_con">
              <div class="con_name fl"><span class="sign">*</span>手机：</div>
              <div class="con_con con_txt fl"><input  class="mobile_" type="text"  autocomplete="off" size="25" v-model="user.phone"><span class="mobile_ms text_te"></span></div>
            </div>

            <div class="content_con">
              <div class="con_name fl"><span class="sign">*</span>邮箱：</div>
              <div class="con_con con_txt fl"><input  class="email_" type="text"  autocomplete="off" size="25" v-model="user.email"><span class="email_ms text_te"></span></div>
            </div>

            <div class="content_con">
              <div class="con_name fl"><span class="sign">*</span>详细地址：</div>
              <div class="con_con con_txt fl"><input id="" class="f-txt" type="text"  maxlength="30" size="25" v-model="user.addr"></div>
            </div>






            <div class="content_button" @click.prevent="op"><a>保&nbsp;存</a></div>
            <div class="hr_10"></div>          
          </div><!--信息内容完-->
        </div><!--信息部分完-->        
      </div><!--右侧信息完-->
    </div><!--左右侧完-->  
  </div><!--整个内容部分-->
  
 
 
 
 
 
  <div class="hr_8"></div>
  </myframe>
</div>
</div>

<script>
    var u = window.location.search
    var p = u.split("=")[1];


    var v = new Vue({
        el : "#app",
        data : {
            user : [],
            image : "",
            path: "images/moren.png"
        },
        created(){
            this.queryuser();
        },
        methods:{
            queryuser() {
                axios.get("/esc-user/esc/user/queryuser?uid=" + p).then(res => {
                    this.user = res.data;
                    if (res.data.image == null){
                        res.data.image = "images/moren.png"
                    }else {
                        res.data.image= "/esc-user" + res.data.image;
                    }
                        this.image=res.data.image
                })
            },

            changetx(){
                file.click(); //触发文件选择框点击事件
            },
            sendImg(){
                if (file.files == 0){
                    alert("请选择上传的图片");
                    return;
                }
                //上传图片 =》返回图片地址
                var fd = new FormData();
                fd.append("file",file.files[0]);
                var uid = this.user.uid;
                axios.post("/esc-user/upload",fd).then(res=>{
                    var img = res.data.data;
                    this.path=img;
                    this.image="/esc-user"+ img;
                    console.info(res.data.data)

                });
            },
            changezl(){
                var p = new URLSearchParams();
                p.append("username",this.user.username);
                p.append("image",this.path);
                p.append("phone",this.user.phone);
                p.append("email",this.user.email);
                p.append("addr",this.user.addr);
                p.append("uid",this.user.uid);
                axios.post("/esc-user/esc/user/changzl",p).then(res=>{
                    console.info(res.data.data)
                    this.user=res.data.data[0];


                })
                console.info(this.user.image)
            },
            op() {
                this.$confirm('是否要修改您的个人资料, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                    this.changezl()
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消修改'
                    });
                });
            },
        }
    })
</script>
</body>
</html>